import {
  Avatar,
  Box,
  Button,
  Card,
  CardActions,
  CardContent,
  CardHeader,
  CardMedia,
  Collapse,
  IconButton,
  IconButtonProps,
  LinearProgress,
  Popover,
  Typography,
  Zoom,
} from "@mui/material"
import { Typography as AntTypography } from "antd"
import React, { useEffect, useRef, useState } from "react"
import FavoriteIcon from "@mui/icons-material/Favorite"
import ShareIcon from "@mui/icons-material/Share"
import ExpandMoreIcon from "@mui/icons-material/ExpandMore"
import MoreVertIcon from "@mui/icons-material/MoreVert"
import { useTheme } from "@mui/material/styles"
import { red } from "@mui/material/colors"
import { styled } from "@mui/material"
import dayjs from "dayjs"
import { ImageViewer, MultiImageViewerRef, Swiper } from "antd-mobile"
import { LottiesBackground } from "@/components/Lotties"
import { avatarBk1 } from "@/components/Lotties/assets"
import { LinkOutlined, PlusOutlined } from "@ant-design/icons"
export interface MemoryCardInfo {
  value?: any
  onToggle?: (info: any) => void
  canPlay?: boolean //当前卡片是否可以播放（同时只有一个卡片可以播放）
}
export interface ExpandMoreProps extends IconButtonProps {
  expand: boolean
}
const ExpandMore = styled((props: ExpandMoreProps) => {
  const { expand, ...other } = props
  return <IconButton {...other} />
})(({ theme }) => ({
  marginLeft: "auto",
  transition: theme.transitions.create("transform", {
    duration: theme.transitions.duration.shortest,
  }),
  variants: [
    {
      props: ({ expand }) => !expand,
      style: {
        transform: "rotate(0deg)",
      },
    },
    {
      props: ({ expand }) => !!expand,
      style: {
        transform: "rotate(180deg)",
      },
    },
  ],
}))
export default (props: MemoryCardInfo) => {
  const { value, onToggle, canPlay = true, ...otr } = props
  const [expanded, setExpanded] = React.useState(false)

  const handleExpandClick = () => {
    setExpanded(!expanded)
  }
  const imgViewerRef = useRef<MultiImageViewerRef>(null)
  const title = value?.content?.slice(0, 50)
  const [visible, setVisible] = useState(-1)
  const [userPop, setUserPop] = useState(false)
  const [anchorEl, setAnchorEl] = React.useState<any>(null)
  return (
    <>
      <Zoom in>
        <Card sx={{ width: "100%" }}>
          <CardHeader
            avatar={
              <LottiesBackground
                loop={0}
                renderStyle={{
                  left: -17,
                  top: -17,
                  width: "180%!important",
                  height: "180%!important",
                  zIndex: 2,
                }}
                animationData={avatarBk1}
              >
                <Avatar
                  onClick={(e) => {
                    setAnchorEl(e.currentTarget)
                    setUserPop(true)
                  }}
                  sx={{ position: "relative", zIndex: 1 }}
                  aria-label="recipe"
                  src={
                    window.alignConfig.blogSourceMinio +
                    "/avatar/" +
                    value?.owner?.avatar?.[0]
                  }
                ></Avatar>
              </LottiesBackground>
            }
            action={
              <IconButton aria-label="settings">
                <MoreVertIcon />
              </IconButton>
            }
            title={value?.owner?.username}
            subheader={dayjs(parseInt(value?.time)).format("YYYY-MM-DD hh:mm")}
          />
          <Popover
            open={userPop}
            anchorEl={anchorEl}
            anchorOrigin={{
              vertical: "bottom",
              horizontal: "center",
            }}
            onClose={() => {
              setAnchorEl(null)
              setUserPop(false)
            }}
          >
            <Box sx={{ display: "flex", p: 1 }}>
              <Box sx={{ p: 2 }}>
                <LottiesBackground
                  loop={0}
                  renderStyle={{
                    left: -17,
                    top: -17,
                    width: "180%!important",
                    height: "180%!important",
                    zIndex: 2,
                  }}
                  animationData={avatarBk1}
                >
                  <Avatar
                    sx={{ position: "relative", zIndex: 1 }}
                    aria-label="recipe"
                    src={
                      window.alignConfig.blogSourceMinio +
                      "/avatar/" +
                      value?.owner?.avatar?.[0]
                    }
                  ></Avatar>
                </LottiesBackground>
              </Box>
              <Box sx={{ display: "flex" }}>
                <Box sx={{ display: "flex", flexDirection: "column" }}>
                  <AntTypography.Text
                    style={{ fontSize: 16, fontWeight: "bold" }}
                  >
                    {value?.owner?.username}
                  </AntTypography.Text>
                  <AntTypography.Paragraph
                    underline
                    ellipsis={{ rows: 3, expandable: true }}
                    type="secondary"
                  >
                    {value?.owner?.autograph ||
                      "这个人很神秘，没有留下任何信息。"}
                  </AntTypography.Paragraph>
                </Box>

                <Box sx={{ flexShrink: 0 }}>
                  <Button
                    size="small"
                    startIcon={<PlusOutlined />}
                    aria-label="settings"
                  >
                    关注
                  </Button>
                </Box>
              </Box>
            </Box>
          </Popover>
          <Swiper
            indicator={(total, current) =>
              value?.img?.length > 1 ? (
                <Box
                  sx={{
                    position: "absolute",
                    top: 6,
                    right: 6,
                    background: "rgba(0, 0, 0, 0.3)",
                    padding: "4px 8px",
                    color: "#ffffff",
                    borderRadius: 4,
                    userSelect: "none",
                  }}
                >
                  {`${current + 1} / ${total}`}
                </Box>
              ) : null
            }
            style={{ display: value?.img?.length ? undefined : "none" }}
          >
            {value?.img?.map((item: string, index: number) => {
              return (
                <Swiper.Item key={index}>
                  <CardMedia
                    component="img"
                    height="250"
                    onClick={() => {
                      imgViewerRef.current?.swipeTo(index)
                      setVisible(index)
                    }}
                    loading="lazy"
                    image={
                      window.alignConfig.blogSourceMinio +
                      "/memoryimage/" +
                      item
                    }
                    alt="error"
                  />
                </Swiper.Item>
              )
            })}
          </Swiper>

          <ImageViewer.Multi
            getContainer={document.body}
            defaultIndex={visible}
            ref={imgViewerRef}
            images={value?.img?.map(
              (item: string) =>
                window.alignConfig.blogSourceMinio + "/memoryimage/" + item,
            )}
            visible={visible > -1}
            onClose={() => {
              setVisible(-1)
            }}
          />

          <CardContent>
            <Typography variant="body2" sx={{ color: "text.secondary" }}>
              {title + (value?.content?.length > title?.length ? "..." : "")}
            </Typography>
          </CardContent>
          <CardContent sx={{ display: value?.music?.length ? void 0 : "none" }}>
            <Button startIcon={<LinkOutlined />}>{value?.music?.[0]}</Button>
          </CardContent>
          <CardActions disableSpacing>
            <IconButton aria-label="add to favorites">
              <FavoriteIcon />
            </IconButton>
            <IconButton aria-label="share">
              <ShareIcon />
            </IconButton>
            <ExpandMore
              sx={{
                display:
                  title?.length == value?.content?.length ? "none" : undefined,
              }}
              expand={expanded}
              onClick={handleExpandClick}
              aria-expanded={expanded}
              aria-label="show more"
            >
              <ExpandMoreIcon />
            </ExpandMore>
          </CardActions>
          <Collapse in={expanded} timeout="auto" unmountOnExit>
            <CardContent>
              <Typography>{value.content}</Typography>
            </CardContent>
          </Collapse>
        </Card>
      </Zoom>
    </>
  )
}
